<script setup lang="ts">
import type { PropType } from "vue";
import { componentEditApi, componentGroupApi } from "@/api/activity";

const props = defineProps({
  form: {
    type: Object as PropType<any>,
  },
  show: {
    type: Boolean,
    default: false,
  },
});

const emits = defineEmits(["update:show", "update:form", "save"]);

const submitLoading = ref(false),
  treeSelectData = ref<Array<any>>([]);

const importFormRef = ref();

const rules = {
  name: [{ required: true, message: "请输入组件名称", trigger: "blur" }],
  icon: [{ required: true, message: "请上传组件图标", trigger: "change" }],
  categoryId: [{ required: true, message: "请选择分组", trigger: "change" }],
  comConfig: [{ required: true, message: "请填写组件配置", trigger: "change" }],
};

watch(
  () => props.show,
  (val) => {
    if (val) getComponentGroup();
  }
);

const detail = computed({
  get: () => {
    return Object.assign({}, props.form);
  },
  set: (val) => {
    emits("update:form", val);
  },
});

// 导入配置保存
const submitImportConfig = () => {
  importFormRef.value.validate(async (valid: any) => {
    if (valid) {
      try {
        JSON.parse(detail.value.comConfig);
      } catch (e) {
        ElMessage.error("组件配置无法识别");
        return;
      }
      submitLoading.value = true;
      const rs = await componentEditApi(detail.value);
      if (rs.code == 200) {
        ElMessage({
          showClose: true,
          message: "保存成功",
          type: "success",
        });
      }
      submitLoading.value = false;
      emits("update:show", false);
      emits("save");
    }
  });
};
// 获取组件分组列表
const getComponentGroup = async () => {
  const rs = await componentGroupApi({ currentPage: 1, showCount: -1 });
  if (rs.code == 200) {
    treeSelectData.value = rs.payload;
  }
};

const onChange = (val) => {
  console.log("?????//////", val);
  detail.value = detail.value;
};
</script>
<template>
  <Dialog :model-value="show" title="组件配置" :loading="submitLoading" :width="800" @confirm="submitImportConfig">
    <el-form :model="detail" :rules="rules" ref="importFormRef" label-width="120px">
      <el-form-item label="组件名称" prop="name">
        <el-input placeholder="请输入组件名称" clearable maxlength="30" :show-word-limit="true" v-model="detail.name"
          @input="onChange">
        </el-input>
      </el-form-item>
      <el-form-item label="组件图标" prop="icon">
        <Upload v-model="detail.icon" file-path="component-icon/" list-type="picture-card" @change="onChange">
          <el-icon>
            <Plus />
          </el-icon>
        </Upload>
      </el-form-item>
      <el-form-item label="所属分组：" prop="categoryId">
        <el-tree-select v-model="detail.categoryId" :data="treeSelectData" node-key="id" :props="{ label: 'name' }"
          placeholder="请选择分组" @change="onChange" />
      </el-form-item>
      <el-form-item label="排序" prop="orderNo">
        <el-input-number v-model="detail.orderNo" :min="1" :step="1" step-strictly @change="onChange" />
      </el-form-item>
      <el-form-item label="组件配置" prop="comConfig">
        <el-input v-model="detail.comConfig" type="textarea" :autosize="{ minRows: 4, maxRows: 10 }" @input="onChange" />
      </el-form-item>
    </el-form>
  </Dialog>
</template>
